<template>
  <div class="content">
    <div class="top">
      <el-card shadow="never" class="card">
        <h1>博客</h1>
        <h2>{{ this.blogTotal }}</h2>
      </el-card>
      <el-card shadow="never" class="card">
        <h1>分类</h1>
        <h2>{{ this.categoryTotal }}</h2>
      </el-card>
    </div>
    <div class="bottom">
      <BlogBar class="bottom_canvans" />
      <CatagoryPie class="bottom_canvans" />
    </div>
  </div>
</template>

<script>
import CatagoryPie from "@/components/CategoryPie";
import BlogBar from "@/components/BlogBar";
import { countBlogs } from "@/api/blog";
import { countCategories } from "@/api/category";
export default {
  name: "Index",
  components: { CatagoryPie, BlogBar },
  data() {
    return {
      blogTotal: 0,
      categoryTotal: 0,
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
    };
  },
  mounted() {
    this.getBlogTotal();
    this.getCategoryTotal();
  },
  methods: {
    getBlogTotal() {
      countBlogs(this.userInfo.id).then((res) => {
        if (res.code == 200) {
          this.blogTotal = res.data;
        }
      });
    },
    getCategoryTotal() {
      countCategories(this.userInfo.id).then((res) => {
        if (res.code == 200) {
          this.categoryTotal = res.data;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px;
    margin-top: 10px;
    .card {
      margin: 0 20px;
      width: 300px;
    }
  }
  .bottom {
    display: flex;
    flex-direction: row;
    .bottom_canvans {
      width: 50%;
      height: 300px;
    }
  }
}
</style>
